<template>
  <div class="app-container">
  	<div class="filter-container">
  		<el-button v-waves class="filter-item" type="primary" icon="el-icon-search">{{$t('table.search')}}</el-button>
  	</div>


  	<el-table
  	v-loading="listLoading"
  	:key="tableKey"
  	:data="list"
  	border
  	fit
  	highlight-current-row
  	style="width: 100%;"
    @sort-change="sortChange"
  	>
  	<el-table-column :label="$t('table.id')" prop="id" sortable="id" align="center" width="65">
  		<template slot-scope="scope">
  			<span>{{ scope.row.id }}</span>
  		</template>
  	</el-table-column>
  	<el-table-column :label="$t('game.map_id')" prop="map_id" sortable="map_id" align="center">
  		<template slot-scope="scope">
  			<span>{{ scope.row.map_id }}</span>
  		</template>
  	</el-table-column>
    <el-table-column :label="$t('game.players')" align="center">
      <template slot-scope="scope">
        <template v-for="(item,key) in scope.row.users">
          <el-tag type="info">
            {{ item.user_info.nickname }}
          </el-tag>
          &nbsp;
        </template>
      </template>
    </el-table-column>
  	<el-table-column :label="$t('game.winner')" align="center">
      <template slot-scope="scope">
        <template v-if="scope.row.winner">
          <el-tag>
            {{ scope.row.winner.nickname }}
          </el-tag>
        </template>
      </template>
  	</el-table-column>
  	<el-table-column :label="$t('game.win_coin')" align="center">
  		<template slot-scope="scope">
  			<span>{{ scope.row.win_coin }}</span>
  		</template>
  	</el-table-column>
  	<el-table-column :label="$t('game.win_diamond')" align="center">
  		<template slot-scope="scope">
  			<span>{{ scope.row.win_diamond }}</span>
  		</template>
  	</el-table-column>
  	<el-table-column :label="$t('game.status')" prop="status" sortable="status" align="center">
  		<template slot-scope="scope">
  			<template v-for="(item,key) in statusOptions">
          <span v-if="item.value==scope.row.status">
            <el-tag :type="scope.row.status==0?'info':(scope.row.status==1?'success':'')">
              {{ item.label }}
            </el-tag>
          </span>
        </template>
  		</template>
  	</el-table-column>
  	<el-table-column :label="$t('game.type')" prop="type" sortable="type" align="center">
  		<template slot-scope="scope">
  			<template v-for="(item,key) in typeOptions">
          <span v-if="item.value==scope.row.type">{{ item.label }}</span>
        </template>
  		</template>
  	</el-table-column>
  	<el-table-column :label="$t('table.time')" prop="created_at" sortable="created_at" align="center">
  		<template slot-scope="scope">
  			<span>{{ scope.row.created_at }}</span>
  		</template>
  	</el-table-column>
  	<el-table-column :label="$t('table.actions')" align="center" width="200">
      <template slot-scope="scope">
        <el-button type="primary" size="mini" @click="handleUpdate(scope.row)">{{ $t('table.detail') }}</el-button>
      </template>
    </el-table-column>
  </el-table>

  <Pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getList" />

</div>
</template>

<script>

import { fetchList } from '@/api/game'
import waves from '@/directive/waves' // Waves directive
import Pagination from '@/components/Pagination' // Secondary package based on el-pagination

export default {
	components: { Pagination },
	directives: { waves },
	data() {
		return {
			tableKey: 0,
			list: null,
			total: 0,
			listLoading: false,
			listQuery: {
				page: 1,
				limit: 20,
				sort: '-id'
			},
      //selects
      statusOptions:[ //0等待开始 1.进行中 2.结束
      {label:'Ready',value:0},
      {label:'Processing',value:1},
      {label:'End',value:2},
      ],
      typeOptions:[ //1.1vs1 2.Tournament
      {label:'1vs1',value:1},
      {label:'Tournament',value:2},
      ]
		}
	},
	created() {
		this.getList()
	},
	methods: {
	    getList() {
	    	helper.getList(fetchList,this);
	    },
      sortChange(data) {
        helper.handleSortChange(data,this)
      }
    },
}
</script>
